﻿<template>
    <div>
        <Content :style="{padding: '24px', minHeight: '480px', background: '#fff'}">
            <el-row style="margin-bottom:12px">
                <el-button size="small" v-on:click="add()" type="primary">添加</el-button>
            </el-row>
            <el-form ref="queryParams" inline label-position="right" label-width="100px" v-model="queryParams">
                <el-form-item label="商户名">
                    <el-input size="small" v-model="queryParams.userName" placeholder="登录名" style="width: 160px" />
                </el-form-item>
                <el-form-item label="公司名">
                    <el-input size="small" v-model="queryParams.realName" placeholder="公司名" style="width: 160px" />
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input size="small" v-model="queryParams.phone" placeholder="手机号码" style="width: 160px" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" v-on:click="search()" type="primary">搜索</el-button>
                    <el-button size="small" v-on:click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table size="small" :data="merchants" border style="width: 100%" v-loading="loading">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="center"  width="155" prop="merName" label="登录名">
                </el-table-column>
                <el-table-column align="center" width="155" prop="phone" label="手机号">
                </el-table-column>
<el-table-column align="center" prop="realName" width="155" label="公司">
                </el-table-column>

                <el-table-column align="center" width="155" prop="createTime" label="注册时间">
                    <template slot-scope="scope">{{scope.row.createTime|long2datetime}}
                    </template>
                </el-table-column>
                <el-table-column align="center" width="55" prop="state" label="状态">
                    <template slot-scope="scope">
                        <template v-if="scope.row.state==1">
                            启用
                        </template>
                        <template v-else>
                            禁用
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="state" width="255" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" :type="scope.row.state==1?'danger':'success'" @click="userState(scope.row, scope.row.state == 1 ? 0 : 1);">{{scope.row.state==1?"禁用":"启用"}}</el-button>
                        <el-button size="mini" type="danger" @click="edit(scope.row)">修改</el-button>
                        <el-button size="mini" type="success" @click="editPwd(scope.row)">修改密码</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="state" label="关联客户">
                    <template slot-scope="scope">
                        <span @click="addUser(scope.row)"> <i class="el-icon-edit" /></span>
                        <el-tag v-for="user in scope.row.customers" :key="user.id" size="mini">{{user.shortName}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </Content>
        <Modal title="编辑" v-model="modalEdit" :closable="false" :mask-closable="false">
            <el-form ref="merchant" label-position="right" label-width="160px" :model="merchant" :rules="rules">
                <input type="hidden" :model="merchant.id" />
                <el-form-item label="商户名" prop="merName">
                    <el-input size="small" v-model="merchant.merName" :disabled="merchant.id>0" placeholder="商户名" style="width: 240px" />
                </el-form-item>
                <el-form-item label="昵称" prop="name">
                    <el-input size="small" v-model="merchant.name" :disabled="merchant.id>0" placeholder="昵称" style="width: 240px" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input size="small" v-model="merchant.phone" placeholder="手机号码" style="width: 240px" />
                </el-form-item>
                <template v-if="!merchant.id">
                    <el-form-item label="登录密码" prop="passport">
                        <el-input size="small" v-model="merchant.passport" placeholder="密码" style="width: 240px" />
                    </el-form-item>
                </template>
                <el-form-item label="登录状态" prop="state">
                    <RadioGroup v-model="merchant.state" placeholder="状态" style="width: 240px">
                        <Radio :label="1">
                            <span>启用</span>
                        </Radio>
                        <Radio :label="0">
                            <span>禁用</span>
                        </Radio>
                    </RadioGroup>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" :loading="modalLoading" @click="ok">确定</el-button>
            </div>
        </Modal>
        <CPassword v-bind:show="modalPwdEdit" v-bind:userId="merchant.id" v-on:ok="pwdOk" @cancel="pwdCancel">
        </CPassword>
        <CCustomerAdd ref="userDialog" @ok="userCallback" />
    </div>
</template>
<script>
import CPassword from '../User/CPassword.vue'
import CCustomerAdd from './CCustomerAdd.vue'
export default {
    name: 'Merchant',
    data() {
        return {
            loading: false,
            modalEdit: false,
            modalLoading: false,
            modalMoneyEdit: false,
            modalPwdEdit: false,

            others: {
                btime: "",
                etime: "",
                bltime: "",
                eltime: ""
            },
            queryParams: {

            },

            moneyChange: {
                title: "充值",
                type: 1,
                money: 0,
                memo: "",
                userId: ""
            },
            merchant: {
                id: 0,
                dfState: '1',
                state: '1'
            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            merchants: [

            ],
            rules: {
                merName: [{
                    required: true,
                    message: "商户名不能为空",
                }],
                phone: [{
                    required: true,
                    message: "手机号码",
                }],
                dfState: [{
                    required: true,
                    message: "",
                }],
                state: [{
                    required: true,
                    message: "",
                }],
                passport: [{
                    required: true,
                    message: "登录密码不能为空",
                }]

            }


        };
    },
    mounted: function() {
        this.getList();

    },
    components: {
        CPassword,
        CCustomerAdd
    },
    methods: {
        userCallback() {
            this.getList();
        },
        addUser(row) {
            let ids = [];
            row.customers.forEach((it, ind) => {
                ids.push(it.id);
            });
            // this.$refs['userDialog'].showDialog(ids, row.id);
             this.$refs['userDialog'].showDialog2(row.customers, row.id);
        },


        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
            this.getList();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        userState: function(user, state) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.showLoading();
                    me.$http.post("/sys/merchant/state.action", { id: user.id, state: state }).then(response => {
                        var body = response;
                        if (body.status == 0) {
                            user.state = state;

                        } else {
                            me.errorMessage(body.info);
                        }
                        me.hideLoading();
                    }, response => {
                        me.hideLoading();
                    });
                },
                onCancel: function() {

                }
            });
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/sys/merchant/getList.action", params).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.page.total = body.obj.totalCount;
                    me.merchants = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        edit: function(row) {
            this.merchant = row;
            this.modalEdit = true;
        },
        add: function() {
            this.merchant = {};
            this.modalEdit = true;
        },
        ok: function() {
            var ok = false;
            this.$refs['merchant'].validate((valid) => {
                ok = valid;
                if (valid) {

                } else {
                    this.errorMessage('请认真填写数据');
                }
            })
            if (!ok) return;
            var me = this;

            me.modalLoading = true;
            // var pd = { phone: me.merchant.phone, id: me.merchant.id };
            me.$http.post("/sys/merchant/doSave.action", me.merchant).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("保存成功！");
                    me.getList();
                    me.modalEdit = false;

                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        },
        cancel: function() {

            this.modalEdit = false;
        },
        editPwd: function(row) {
            this.merchant.id = row.id;
            this.modalPwdEdit = true;
        },
        pwdOk: function() {
            this.modalPwdEdit = false;
        },
        pwdCancel: function() {

            this.modalPwdEdit = false;
        }
    }
}
</script>
<style scoped>
.ivu-table table {
    min-height: 500px;
}
</style>